/*
* 消息主界面路由容器组件
* */
import React, {Component} from 'react'
import {connect} from 'react-redux'
import {List, Badge} from "antd-mobile";
import QueueAnim from 'rc-queue-anim'

const Item = List.Item
const Brief = Item.Brief


/*
* 对chatMsgs按照chat_id进行分组,  并得到每个组的lastMsg组成的数组
* 1. 找出每个聊天的lastMsg 并且用一个对象容器来保存 属性名 {chat_id: lastMsg}
* 2. 得到所有lastMsg的数组
* 3. 对数组进行排序  --  (按照create_time进行降序排序)
* */
function getLastMsgs(chatMsgs, userid) {
    // 1. 找出每个聊天的lastMsg 并且用一个对象容器来保存 属性名 {chat_id, lastMsg}
    const lastMsgObjs = {}   // 准备一个空容器
    console.log(chatMsgs)
    chatMsgs.forEach(msg => {


     // 对msg进行个体的统计  --  先对每条消息的进行统计   最后再计算全部未读消息
    // 对msg天剑一个unRead属性
    if (msg.to===userid && !msg.read) {  // 别人发给我的,并且没有被读的消息才会进行计算
        msg.unReadCount = 1
    } else {
        msg.unReadCount = 0
    }

    // 得到msg的聊天id
    const chatId = msg.chat_id
    // 获取已包括的当前组的lstMsg
    let lastMsg = lastMsgObjs[chatId]
    // 可能里面没有数据
    if (!lastMsg) {
        // 没有数据 应该保存起来  当前遍历到的msg就是所在组的lastMsg
        lastMsgObjs[chatId] = msg
    } else {
        /*
        * 要把原来的msg 的 unReadCount 拿出来 加起来都保存到最新的lastMsg的unReadCount属性上
        * */
        const unReadCount = lastMsg.unReadCount

        // 有数据  -- 还出现了msg
        // 如果msg比lastMsg 晚,就将msg保存为lastMsg
        if (msg.create_time > lastMsg.create_time) {
            lastMsgObjs[chatId] = msg
        }
        // 当前所有的未读数量都保存在最新的lastMsg的unReadCount属性上了
        lastMsgObjs[chatId].unReadCount = unReadCount + msg.unReadCount
    }
    })
    // 2. 得到所有lastMsg的数组
    // 所有的lastMsg都是对象  要转换成数组
    const lastMsgs = Object.values(lastMsgObjs)
    // 3. 3. 对数组进行排序  --  (按照create_time进行降序排序)
    lastMsgs.sort(function (m1, m2) {
        // 如果结果 < 0  就会将 m1 放在前面
        return m2.create_time
            - m1.create_time
    })
    return lastMsgs
}


class Message extends Component{

     render() {

       /* const {user} = this.props
        const {users, chatMsgs} = this.props*/
        const {user} = this.props
        const {users, chatMsgs} = this.props.chat


        // 对chatMsgs进行分组  要 根据 chat_id进行分组
        const lastMsgs = getLastMsgs(chatMsgs,user._id)



        return (
            <List style={{marginTop:10, marginBottom:50}}>
                <QueueAnim type='scale'>
                    {
                        lastMsgs.map(msg => {
                            /*判断哪个才是聊天对象*/
                            // 得到目标用户的id
                            const targetUserId = msg.to===user._id ? msg.from : msg.to
                            // 得到目标用户的信息
                            const targetUser = users[targetUserId]
                            return (
                                <Item
                                    key={msg._id}
                                    extra={<Badge text={msg.unReadCount} />}
                                    thumb={
                                        targetUser.header ? require(`../../assets/images/${targetUser.header}.png`) : null
                                    }
                                    arrow='horizontal'
                                    onClick={() => this.props.history.push(`/chat/${targetUserId}`)}
                                >
                                {msg.content}
                                <Brief>{targetUser.username}</Brief>
                                </Item>
                            )
                        })
                    }
                </QueueAnim>
            </List>
        )
    }
}
/*
* 最终向外暴露的是向外产生的容器组件
* */
export default connect(
    state => ({user: state.user, chat: state.chat}),
    {}
)(Message)